<style>
    .grid-container {
      width: 1000px;
      /* height: 620px; */
      display: inline-grid;
      /* 创建3行，每行高 200px */
      grid-template-rows: repeat(3, 80px 200px);
      /* 创建 3列，第1，3列宽为200px，第2列宽自动 */
      grid-template-columns: 200px auto;
      grid-auto-flow: column; /* 项目排列顺序-先列后行排列 */
      gap: 0px 20px; /* 行列间距都为10px */
    }
    .grid-item.header {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      font-weight: bold;
    }
    .grid-container .grid-item.list {
      display: grid;
      /*
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(2, 1fr);
        */
      /*
            使用 minmax(0, 1fr) 替代 1fr，
        强制单元格在内容过大时压缩，而不是撑开：
        */
      grid-template-rows: repeat(2, minmax(0, 1fr));
      grid-template-columns: repeat(2, minmax(0, 1fr));
  
      gap: 5px 5px;
    }
  
    .grid-container .grid-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  
    .grid-item.big-img {
      /* 水平开始网格线   垂直开始网格线  水平结束网格线  垂直结束网格线 */
      grid-area: 1/2/7/3; /* 占据的区域 */
    }
  </style>
  
  <div class="grid-container">
    <div class="grid-item header">帽子</div>
    <div class="grid-item list">
      <div class="img"><img src="/src/img/grid/01.png" alt="" /></div>
      <div class="img"><img src="/src/img/grid/02.png" alt="" /></div>
      <div class="img"><img src="/src/img/grid/03.png" alt="" /></div>
      <div class="img"><img src="/src/img/grid/04.png" alt="" /></div>
    </div>
    <div class="grid-item header">衣服</div>
    <div class="grid-item list">
      <div class="img"><img src="/src/img/grid/05.png" alt="" /></div>
      <div class="img"><img src="/src/img/grid/06.png" alt="" /></div>
      <div class="img"><img src="/src/img/grid/07.png" alt="" /></div>
      <div class="img"><img src="/src/img/grid/08.png" alt="" /></div>
    </div>
    <div class="grid-item header">裤子</div>
    <div class="grid-item list">
      <div class="img"><img src="/src/img/grid/09.png" alt="" /></div>
      <div class="img"><img src="/src/img/grid/10.png" alt="" /></div>
      <div class="img"><img src="/src/img/grid/11.png" alt="" /></div>
      <div class="img"><img src="/src/img/grid/12.png" alt="" /></div>
    </div>
    <!-- 大图 -->
    <div class="grid-item big-img">
      <img src="/src/img/grid/01.png" alt="" />
    </div>
  </div>